<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #img{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="handleImgChange">切换图片</button>
        <!-- v-bind:attribute -->
        <!-- <img id="img" v-bind:src="img_str" alt=""> -->
        <!-- 缩写 : -->
        <!-- <img id="img" :src="img_str" alt=""> -->
        <!-- 动态参数 -->
        <img id="img" :[src_src]="img_src" alt="">
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            src_src:"src",
            img_src:"./img/1.jpg"
        },
        methods: {
            handleImgChange:function(){
                // 通知 wachter => 更新 dom 
                this.img_src =(this.img_src==="./img/1.jpg"?"./img/2.jpg":"./img/1.jpg")
            }
        },
    })
</script>
</html>